<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}"/>
</head>
<body>
<div class="bg-light min-vw-100 min-vh-100 d-flex align-items-center">
    <div class="shadow p-3 mb-5 bg-white rounded w-25 h-50 m-auto">
        <form th:action="@{/login}" method="post">
            <div class="form-group row mb-3">
                <img class="m-auto" th:src="@{static/images/qq.png}" alt="logo.png" width="72" height="72">
            </div>
            <div class="form-group">
                <h1 class="h3 mb-3 font-weight-normal text-center">学生会管理系统</h1>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="id" value="" required autofocus autocomplete="off" placeholder="账号">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" name="password" value="" required autocomplete="off" placeholder="密码">
            </div>
            <div class="form-group row ml-0">
                <input type="text" class="form-control col-8" name="code" value="" autocomplete="off" required placeholder="验证码">
                <img id="vcode" class="col-4 rounded-lg" th:src="@{/vcode}" height="38">
            </div>
            <div class="form-group row ml-0">
                <div class="col-4 ml-2">
                    <input type="checkbox" class="form-check-input" name="autoLogin" value="1" id="autoLogin">
                    <label class="form-check-label" for="autoLogin">自动登录</label>
                </div>
                <div class="col-6">
                    <span class="text-danger" th:text="${message}"></span>
                </div>
            </div>
            <div class="form-group row ml-0">
                <button type="submit" class="btn btn-primary col-7 m-auto">登录</button>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/static/js/jquery-3.5.1.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
<script>
    $("#vcode").click(function () {
        var src = "/vcode?"+new Date().getTime();
        $(this).prop("src",src);
    });
</script>
</body>
</html>